* 
    margin 0
    padding 0 
    box-sizing border-box

:root {
    --primary-color #684baa
    --secondary-color #373b69
    --white-color #fff
    --placeholder-color #7378c5
    }

body
    background-color var(--primary-color)
    font-family sans-serif

header
    padding 1rem
    display flex
    flex-direction flex-end
    justify-content center
    background-color var(--secondary-color)
    height 100px
    align-items center
    .search
        background-color transparent
        border 2px solid var(--primary-color)
        border-radius 50px
        font-family inherit
        font-size 1rem
        padding 0.5rem 1rem
        color var(--white-color)
        &:placeholder
            color var(--placeholder-color)
        &:focus
            outline none
            background-color var(--primary-color)

main
    display flex
    flex-wrap wrap
    justify-content center flex-start
    .col
        width 300px
        height 200px